<template>
    <view class="splash-container">
      <view class="page page1" :class="currentPage===0?'active':'hid'">
        <!-- 上部空白区域（只有背景） -->
        <view class="page-empty"></view>
        
        <!-- 下部内容区域 -->
        <view class="page-content">
          <view class="title">
            <view>給每種心緒</view>
            <view>一個安放之境</view>
          </view>
          <view class="desc">
            <view>输入你的呼吸,</view>
            <view>INNERSOUND会回应一首为你定制的冥想诗篇</view>
          </view>
          <view class="btn">
            <button @click="()=>{currentPage+=1}">
              开始体验
            </button>
          </view>
          <view class="pagination-dots page1-dots">
            <view class="dot active"></view>
            <view class="dot"></view>
            <view class="dot"></view>
          </view>
        </view>
      </view>
      <view class="page page2" :class="currentPage===1?'active':'hid'">
        <!-- 上部空白区域（只有背景） -->
        <view class="page-empty"></view>
        
        <!-- 下部内容区域 -->
        <view class="page-content">
          <view class="title">
            <view>給每種心緒</view>
            <view>一個安放之境</view>
          </view>
          <view class="desc">
            <view>输入你的呼吸,</view>
            <view>INNERSOUND会回应一首为你定制的冥想诗篇</view>
          </view>
          <view class="btn">
            <button @click="()=>{currentPage+=1}">
              开始体验
            </button>
          </view>
          <view class="pagination-dots page1-dots">
            <view class="dot active"></view>
            <view class="dot"></view>
            <view class="dot"></view>
          </view>
        </view>
      </view>
      <view class="page page3" :class="currentPage===2?'active':'hid'">
        <!-- 说明文字 -->
        <view class="instruction-text">
          <view>听起来你此刻的情绪不止一种,</view>
          <view>选几个最符合当下状态的吧</view>
        </view>
        <scroll-view scroll-y="true" class="emotion-scroll">
          <view class="emotion-list">
            <view 
            v-for="(emotion, index) in emotionList" 
            :key="index"
            class="emotion-card"
            :class="{ selected: emotion.selected }"
            @click="toggleEmotion(index)"
          >
              <view class="checkbox" :class="{ checked: emotion.selected }">
                <view v-if="emotion.selected" class="checkmark">✓</view>
              </view>
              <view class="emotion-info">
                <view class="emotion-title">{{ emotion.title }}</view>
                <view class="emotion-desc">{{ emotion.desc }}</view>
              </view>
              <view class="emotion-icon">⚱</view>
            </view>
          </view>
        </scroll-view>
        <view class="btn">
          <button @click="handleConfirmSelection">我选好了</button>
        </view>

      </view>
      <!-- 分页器 -->
      <view class="pagination-dots" v-if="currentPage!=2">
        <view class="dot" :class="currentPage==0?'active':''" @click="()=>{currentPage=0}"></view>
        <view class="dot" :class="currentPage==1?'active':''" @click="()=>{currentPage=1}"></view>
        <view class="dot" :class="currentPage==2?'active':''" @click="()=>{currentPage=2}"></view>
      </view>
    </view>
</template>
    
<script lang='ts' setup name='splash'>
import { ref } from 'vue';
const currentPage = ref(0)
  const emotionList = ref([
    {
      title: '标题',
      selected: true,
      desc: '内容介绍内容介绍内容介绍'
    },
    {
      title: '标题',
      selected: true,
      desc: '内容介绍内容介绍内容介绍'
    },
    {
      title: '标题',
      selected: true,
      desc: '内容介绍内容介绍内容介绍'
    },
    {
      title: '标题',
      selected: false,
      desc: '内容介绍内容介绍内容介绍'
    },
    {
      title: '标题',
      selected: false,
      desc: '内容介绍内容介绍内容介绍'
    },{
      title: '标题',
      selected: false,
      desc: '内容介绍内容介绍内容介绍'
    },
    {
      title: '标题',
      selected: false,
      desc: '内容介绍内容介绍内容介绍'
    },
    {
      title: '标题',
      selected: false,
      desc: '内容介绍内容介绍内容介绍'
    }
  ])

  // 切换情绪选择状态
  const toggleEmotion = (index: number) => {
    emotionList.value[index].selected = !emotionList.value[index].selected
  }

  // 确认选择
  const handleConfirmSelection = () => {
    const selectedEmotions = emotionList.value.filter(e => e.selected)
    console.log('选中的情绪:', selectedEmotions)
    
    // 跳转到主页或其他页面
    uni.navigateTo({
      url: '/pages/home/home'
    })
  }
</script>
    
<style scoped lang="scss">
    .splash-container{
        width: 100%;
        height: 100vh;
        overflow: hidden;
        .page{
          display: flex;
          flex-direction: column;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100vh;
          transition: all 1s ease;
          &.hid{
            display: none;
          }
        }
        .page1{
          background-color: #a98c79;
        }
        .page2{
          background-color: #19120e;
        }
        .page1,.page2{
          .page-empty{
            flex: 1;
            width: 100%;
          }
          .page-content{
            margin-bottom: 100rpx;
            padding: 0 60rpx;
            color: #fff;
            .title{
              view{
                text-align: start;
                font-size: 60rpx;
                font-weight: bold;
              } 
              margin-bottom: 10px;
            }
            .desc{
              view{
                font-size: 25rpx;
                line-height: 1.6;
              }
              margin-bottom: 30px;
            }
            .btn{
              width: 100%;
              display: flex;
              justify-content: center;
              button{
                width: 80%;
                border-radius: 20rpx;
                padding: 10rpx 20rpx;
                font-size: 30rpx;
                border: none;
                color: #fff;
                background-color: #c0aa9c;
              }
            }
          }
        }
        .page3{
          box-sizing: border-box;
          background-color: #101010;
          display: flex;
          flex-direction: column;
          padding: 0 20rpx 40rpx;
          padding-top: calc(env(safe-area-inset-top) + 80rpx);
          height: 100vh;
          overflow: hidden;

            .instruction-text {
              font-size: 40rpx;
              color: #fff;
              line-height: 1.7;
              text-align: start;
              margin-top: 40rpx;
              margin-bottom: 36rpx;
              opacity: 0.92;
              font-weight: 300;
              flex-shrink: 0;
            }

            .emotion-scroll {
              flex: 1;
              min-height: 0;
              overflow-y: auto;
            }

            .emotion-list {
              width: 100%;
              display: flex;
              flex-direction: column;
              gap:40rpx;

              .emotion-card {
                width: 100%;
                max-height: 150rpx;
                background: rgba(255, 255, 255, 0.04);
                border: 1px solid rgba(255, 255, 255, 0.08);
                border-radius: 12px;
                padding: 30rpx;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                gap: 16px;
                transition: all 0.25s ease;
                
                &.selected {
                  background: rgba(166, 139, 95, 0.12);
                  border-color: rgba(166, 139, 95, 0.25);
                }
                
                &:active {
                  transform: scale(0.98);
                  background: rgba(255, 255, 255, 0.06);
                }

                .checkbox {
                  width: 24px;
                  height: 24px;
                  border: 1.5px solid rgba(255, 255, 255, 0.4);
                  border-radius: 50%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  flex-shrink: 0;
                  transition: all 0.25s ease;
                  background: transparent;
                  
                  &.checked {
                    background: #c5b1a5;
                    border-color: #c5b1a5;
                  }

                  .checkmark {
                    color: #8b6f47;
                    font-size: 12px;
                    font-weight: 700;
                    line-height: 1;
                  }
                }

                .emotion-info {
                  flex: 1;

                  .emotion-title {
                    font-size: 40rpx;
                    color: #fff;
                    margin-bottom: 15rpx;
                    font-weight: 600;
                    opacity: 0.95;
                  }

                  .emotion-desc {
                    font-size: 25rpx;
                    color: rgba(255, 255, 255, 0.5);
                    line-height: 1.5;
                  }
                }

                .emotion-icon {
                  font-size: 20px;
                  color: rgba(255, 255, 255, 0.3);
                  flex-shrink: 0;
                }
              }
            }

            .btn{
              width: 100%;
              display: flex;
              justify-content: center;
              margin-top: 40rpx;
              flex-shrink: 0;
              button{
                width: 55%;
                background-color: #d5bca7;
                color: #5c3d12;
                border-radius: 10rpx;
                font-size: 35rpx;
                border: none;
                padding: 20rpx 0;
                &:active {
                  opacity: 0.85;
                  transform: scale(0.97);
                }
              }
            }
        }
        // 分页指示器
        .pagination-dots {
          // 位于中间
          position: absolute;
          z-index: 999;
          bottom: 40rpx;
          left: 50%;
          transform: translateX(-50%);

          display: flex;
          gap: 8px;
          align-items: center;
          justify-content: center;
          .dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #c5b1a5;
            transition: all 0.3s ease;
            opacity: 0.4;
            border: 1px solid transparent;
            
            &.active {
              width: 8px;
              height: 8px;
              background: #fff;
              opacity: 1;
              border: none;
            }
          }
          
          &.white-dots {
            .dot {
              background: transparent;
              border: 1px solid rgba(255, 255, 255, 0.4);
              
              &.active {
                background: #fff;
                border: none;
                opacity: 1;
              }
            }
          }
        }
    }
</style>